Hybrid development is developing programs by using both front-end development and native development. The front-end development is developing web pages and web apps based on technologies such as JavaScript, HTML, and CSS. The native development is programming based on native functions of local operating systems of smart devices, such as mobile phones. For example, native interface development based on systems such as iOS and Android. React is a JS framework produced by Facebook, and is a construction system for standardizing front-end development. React Native is launched by Facebook based on React standards, and is a technology implementation framework permitting native applications to be developed by using front-end technologies.
Hybrid development is a very popular development mode for current mobile software applications (or APPs). In a hybrid development mode, front-end web page development technology is used to develop interfaces and services, and native development is used to provide native capabilities of various OS, so that an APP can have front-end dynamic capability and a native experience effect.
A ListView is the most common presentation form of an APP and it is used to present a page including a list form content, presents a large number of ListCells with the same or similar structure in a list, and usually can support inclusion of various ListCell. The ListCells have basically the same presentation structure, and only information contents to be presented are different. A ListCell is a content presented in each row or each sub cell of the ListView. Because a screen has a limited display area, the screen can present only some ListCell contents of the ListView at the same time. Some of the other ListCells can scroll in the screen display area only by scrolling up and down, and correspondingly, some ListViews scroll out of the display area. Therefore, a number of ListCells that a user can see on the screen is limited. However, in current front-end technology, a front-end needs to trigger a Native framework to create instances and perform rendering for all ListCells. Consequently, computer performance can be wasted by the triggered Native framework. An existing ListView implementation solution on React Native is shown in FIG. 1. Because a ListCell is defined at a front-end layer, a React Native framework can only map an entire structure of a ListView to a native layer. Therefore, if the ListView has 100 ListCells, 100 ListCells are created at the native layer, and the 100 ListCells are arranged and rendered, which consumes both memory (for example, a computer memory) and time.
In a list scrolling process, a ListCell that has been moved out of the displayable area can be reused to present a ListCell that is to be moved to the displayable area. As such, memory and time needed for creating and arranging new ListCells can be reduced to improve performance. In current hybrid technology and in ListView development, a structure layout and a ListCell class are defined at the front-end, and the front-end triggers the native layer to create a ListCell instance. Therefore, due to limitations of front-end DOM rendering mechanisms, the native layer may not be able to efficiently reuse the ListCell because reconstructing a DOM can require higher computing costs.
In current native development, there are corresponding technologies for reusing ListCells. However, because front-end technology is used to develop pages in the hybrid technology, both a ListView and a ListCell are created at the front-end. If the ListCell is created and reused at the native layer, a ListCell class defined at the front-end cannot be transmitted to the native layer. In other words, an instance cannot be directly created at the native layer for the ListCell class defined by using JavaScript (JS) at the front-end. Therefore, currently, in hybrid development, there is no technology that can be used to reuse a front-end ListCell.